<template>
  <div class="page-article">
    <div class="d-flex py-3 px-2 border-bottom">
      <i class="iconfont icon-fanhui-copy text-blue" @click="back"></i>
      <strong class="flex-1 text-ellipsis pl-2 pr-3 text-blue">{{model.title}}</strong>
      <div class="text-grey fs-xs">{{model.updatedAt | date}}</div>
    </div>
    <div v-html="model.body" class="px-3 body fs-lg"></div>
    <div class="px-3 border-top py-2">
      <div>
        <i class="iconfont icon-xiangguan"></i>
        <strong class="text-blue fs-lg ml-1">相关资讯</strong>
      </div>
      <div class="pt-3">
        <router-link
         class="py-1 px-3"
         tag="div"
         :to="`/articles/${item._id}`"
         v-for="item in model.related" :key="item._id">
         {{item.title}}
         </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    id: { required: true }
  },
  watch: {
    // id: 'fetch'
    id () {
      this.fetch()
    }
  },
  data () {
    return {
      model: {}
    }
  },
  filters: {
    date (val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  methods: {
    async fetch () {
      const res = await this.$http.get('/articles/' + this.id)
      // console.log(res)
      this.model = res.data
    },
    back () {
      history.back()
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss">
.page-article {
  .icon-fanhui-copy {
    font-size: 1.3846rem;
  }
  .body {
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
